<template>
  <el-progress
    v-if="type=='line'"
    class="line-bar"
    :percentage="percentage"
    type="line"
    :color="colorMethod"
    :show-text="showText"
    :text-inside="showText"
    :stroke-width="showText?26:6"
  ></el-progress>
  <el-progress
    v-else
    :percentage="percentage"
    :type="type"
    :color="colorMethod"
    :show-text="showText"
  ></el-progress>
</template>

<script>
export default {
  name:"mm-progress",
  props: {
    percentage: {// 百分比，0到100
      type: Number,
      default: 0
    },

    type: {// 类型：line、circle、dashboard
      type: String,
      default: "line"
    },

    showText: {// 是否显示百分比的文字
      type: Boolean,
      default: false
    },

    color: {// 颜色值，类型："#f56c6c"、{ 40:"green", 80:"yellow", 100:"red" }
      type: [String, Object],
      default: null
    }
  },

  methods: {
    colorMethod(percentage) {
      if (typeof this.color == "string") {
        return this.color;
      }
      if (typeof this.color == "object") {
        for (let key in this.color) {
          if (percentage <= key) {
            return this.color[key];
          }
        }
      }
      return "#409eff";
    }
  }
}
</script>

<style scoped>
.line-bar {
  width: 100%;
}
</style>